モノレポでstorybookを作成してAmplifyにデプロイ

今回サンプル用に作成したプロジェクトのgitです。

プロジェクトの作成

sample-project
  ├── storybook
  └── test-app

mkdir sample-project && cd sample-project
yarn create vite
vi sample-project/package.json
{
  "name": "sample-project",
  "private": true,
  "workspaces": {
    "packages": [
      "test-app",
      "storybook"
    ]
  }
}
yarn workspace test-app install
yarn workspace test-app dev

mkdir storybook && cd storybook
yarn init
npx storybook init --builder @storybook/builder-vite
yarn workspace storybook install
yarn workspace storybook storybook

最後の行のコマンドを実行すると、storybookが立ち上がるはずですが、自分の環境ではホスト名を指定しないとうまく開くことができませんでした。 sample-project/storybook/package.json を一部以下のように編集してホスト名を指定します

"scripts": {
    "storybook": "start-storybook -h 0.0.0.0 -p 6006",
    "build-storybook": "build-storybook"
  }

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - yarn install
        build:
          commands:
            - yarn workspace storybook build-storybook
      artifacts:
        baseDirectory: storybook/storybook-static
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
      buildPath: /
    appRoot: storybook

自分はamplify.ymlの書き方を間違えていて何度かエラーが発生しました。もしデプロイに失敗していた場合マネジメントコンソールからエラーを確認できます。amplify.ymlで指定されているパスなど、どこを起点にしたパスを書いたら良いのか分かりづらかったです。

エイリアス

const path = require("path");
const { mergeConfig } = require("vite");

module.exports = {
  ...
  viteFinal: async (config, { configType }) => {
    return mergeConfig(config, {
      root: "./",
      resolve: {
        alias: {
          "@test-app/": path.resolve(__dirname, "../../test-app/src/") + "/",
        },
      },
    });
  },
};

{
  "compilerOptions": {
    ...
    "paths": {
      "@test-app/*": ["./test-app/src/*"]
    }
  },
}